<extend name="Public/layout" />
<block name="body">
    <link rel="stylesheet" href="/Public/Wap/css/e.css">
    <link rel="stylesheet" href="/Public/Wap/css/plist.css">
    <link rel="stylesheet" href="/Public/Wap/css/new/index.css">
    <script src="/Public/Wap/js/vue.js"></script>
    <script src="/Public/Wap/js/e.js"></script>
    <script src="/Public/Wap/js/echarts.js"></script>
    <script src="/Public/Wap/js/echarts-theme.js"></script>
    <div id="app" class="panel panel-default panel-intro">
        <div class="panel-heading">
            <ul class="nav nav-tabs" data-field="warping">
                <li class="active"><a>首页</a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-8">
                    <div id="echart" style="height: 200px; width: 100%; ">
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card sameheight-item stats">
                        <div v-if="detail.echart_right" class="card-block">
                            <div class="row row-sm stats-container">
                                <div class="col-xs-6 stat-col">
                                    <div class="stat-icon"><i class="fa fa-rocket"></i></div>
                                    <div class="stat">
                                        <div class="value"> {{detail.echart_right.echart_today.auctionNum}}</div>
                                        <div class="name"> 今日录单</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                                    </div>
                                </div>
                                <div class="col-xs-6 stat-col">
                                    <div class="stat-icon"><i class="fa fa-shopping-cart"></i></div>
                                    <div class="stat">
                                        <div class="value"> {{detail.echart_right.echart_today.ordernum}}</div>
                                        <div class="name"> 今日订单</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                    </div>
                                </div>
                                <div class="col-xs-6  stat-col">
                                    <div class="stat-icon"><i class="fa fa-line-chart"></i></div>
                                    <div class="stat">
                                        <div class="value"> {{detail.echart_right.echart_today.estimateServiceFee}}
                                        </div>
                                        <div class="name"> 今日金额</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                    </div>
                                </div>
                                <div class="col-xs-6  stat-col">
                                    <div class="stat-icon"><i class="fa fa-users"></i></div>
                                    <div class="stat">
                                        <div class="value"> {{detail.echart_right.echart_today.estimateCosPrice}}</div>
                                        <div class="name"> 今日预估</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                    </div>
                                </div>
                                <div class="col-xs-6  stat-col">
                                    <div class="stat-icon"><i class="fa fa-list-alt"></i></div>
                                    <div class="stat">
                                        <div class="value"> {{detail.echart_right.echart_yestoday.ordernum}}</div>
                                        <div class="name"> 昨天订单</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                    </div>
                                </div>
                                <div class="col-xs-6 stat-col">
                                    <div class="stat-icon"><i class="fa fa-dollar"></i></div>
                                    <div class="stat">
                                        <div class="value"> {{detail.echart_right.echart_yestoday.estimateCosPrice}}
                                        </div>
                                        <div class="name"> 昨天预估</div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="grade">
                    <div class="titles">
                        <img class="fl" src="/Public/img/11.png" alt="">
                        <p>预估数据</p>
                    </div>
                    <div v-if="yugu_data" class="predict">
                        <el-row :gutter="55">
                            <el-col :span="6">
                                <div class="time-item" style="background: #10879B;">
                                    <div>
                                        <p class="fl">{{yugu_data.today_yugu_money}}</p>
                                        <p class="fr date ">今日</p>
                                    </div>
                                    <div class="clear">
                                        <p class="fl">预估服务费</p>
                                        <p class="fr ">预估总计</p>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="time-item" style="background: #0F60AB;">
                                    <div>
                                        <p class="fl">{{yugu_data.yes_yugu_money}}</p>
                                        <p class="fr date">昨日</p>
                                    </div>
                                    <div>
                                        <p class="fl">预估服务费</p>
                                        <p class="fr">预估总计</p>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="time-item" style="background: #810FAB;">
                                    <div>
                                        <p class="fl">{{yugu_data.benyue_yugu_money}}</p>
                                        <p class="fr date">本月</p>
                                    </div>
                                    <div>
                                        <p class="fl">预估服务费</p>
                                        <p class="fr">预估总计</p>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="time-item" style="background: #386EAB;">
                                    <div>
                                        <p class="fl">{{yugu_data.shangyue_yugu_money}}</p>
                                        <p class="fr date">上月</p>
                                    </div>
                                    <div>
                                        <p class="fl">预估服务费</p>
                                        <p class="fr">预估总计</p>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="titles">
                        <img class="fl" src="/Public/img/11.png" alt="">
                        <p>个人数据</p>
                    </div>
                    <div v-if="my_data" class="mydata">
                        <el-row :gutter="55">
                            <el-col :span="12">
                                <div class="num-item" style="background: #0F60AB;">
                                    <p class="title">个人已出单产品信息</p>
                                    <div class="fl" @click="to_list(1)">
                                        <p class="num">{{my_data.today_not_deal_num}}</p>
                                        <p class="numtext">今日出轨未处理</p>
                                    </div>
                                    <div class="fr" @click="to_list(3)">
                                        <p class="num">{{my_data.today_expire_num}}</p>
                                        <p class="numtext">今日到期未处理</p>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="num-item" style="background: #0F60AB;">
                                    <p class="title">个人已出单产品信息</p>
                                    <div class="fl" @click="to_index(1)">
                                        <p class="num">{{my_data.paiqi_num}}</p>
                                        <p class="numtext">排期中产品数量</p>
                                    </div>
                                    <div class="fr" @click="to_index(2)">
                                        <p class="num">{{my_data.hezuo_seller_num}}</p>
                                        <p class="numtext">合作中店铺数量</p>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="titles">
                        <img class="fl" src="/Public/img/1.png" alt="">
                        <p>等级系统</p>
                    </div>
                    <div class="present">当前等级<span style="color: red;">
                            <span v-if="user_level==0">青铜</span>
                            <span v-if="user_level==1">黑铁</span>
                            <span v-if="user_level==2">白银</span>
                            <span v-if="user_level==3">黄金</span>
                            <span v-if="user_level==4">白金</span>
                            <span v-if="user_level==5">钻石</span>
                        </span> 目标<span>白银</span>{{mubaio_level_text}}</div>
                    <div class="grade-row ui-flex">
                        <div class="row-item" :class="user_level==index?'active':''" v-for='(item,index) in present'
                            :key="index">
                            <div class="logo">
                                <img src="/Public/img/6.png" v-if="index===0" alt="">
                                <img src="/Public/img/8.png" v-if="index===1" alt="">
                                <img src="/Public/img/0.png" v-if="index===2" alt="">
                                <img src="/Public/img/5.png" v-if="index===3" alt="">
                                <img src="/Public/img/9.png" v-if="index===4" alt="">
                                <img src="/Public/img/7.png" v-if="index===5" alt="">
                            </div>
                            <p class="wire first"></p>
                            <div class="referral">
                                <p class="v" :class="user_level==index?'active_n':''">{{item.name}}</p>
                                <p class="num" :class="user_level==index?'active_n':''">{{item.money}}</p>
                                <p class="text">{{item.desc}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="titles">
                        <img class="fl" src="/Public/img/11.png" alt="">
                        <p>业绩排行</p>
                    </div>
                    <div class="ui-flex ui-flex-between fixed-table-toolbar">
                        <div>
                            <a @click="getRankList" class="btn btn-primary btn-refresh" title="刷新"><i
                                    class="fa fa-refresh"></i></a>
                            <a v-for="(n, i) in '今天|昨天|本月|上月'.split('|')"
                                @click="rank.search.type = (i+1);getRankList()" class="btn btn-primary"
                                style="margin-left: 3px">{{n}}</a>
                            <a class="btn btn-default" style="font-size:12px;color:dodgerblue;padding: 7.5px 12px;">
                                <span class="extend"> 总计：<span>{{ rank.total_money }}</span>
                                </span>
                            </a>
                        </div>
                        <div class="ui-flex">
                            <el-date-picker v-model="rank.searchTime" type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small">
                            </el-date-picker>&nbsp; <el-select v-model="rank.search.gid" placeholder="请选择" size="small">
                                <el-option v-for="(n, i) in rank.group" :key="n.id" :label="n.title" :value="n.id">
                                </el-option>
                            </el-select>&nbsp; <el-button @click="getRankList" type="primary" size="small">提交
                            </el-button>
                        </div>
                    </div>
                    <div class="table" style="margin-right: 10px;">
                        <el-row class="item top">
                            <el-col :offset="2" :span="4"> 排名 </el-col>
                            <el-col :span="4"> 姓名 </el-col>
                            <el-col :span="4"> 订单数 </el-col>
                            <el-col :span="4"> 付款金额 </el-col>
                            <el-col :span="4"> 预估服务费 </el-col>
                        </el-row>
                        <el-row class="item" v-for="(i, index) in rank.list">
                            <el-col :offset="2" :span="4">
                                <div>
                                    <img class="fl" v-if="index===0" src="/Public/img/4.png" alt="">
                                    <img class="fl" v-if="index===1" src="/Public/img/2.png" alt="">
                                    <img class="fl" v-if="index===2" src="/Public/img/3.png" alt=""> {{i.ranking}}
                                </div>
                            </el-col>
                            <el-col :span="4"> {{i.name}} </el-col>
                            <el-col :span="4"> {{i.order_num}} </el-col>
                            <el-col :span="4"> {{i.order_money}} </el-col>
                            <el-col :span="4"> {{i.order_yugu_money}} </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- </body> -->
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    list: [
                        1, 1, 1, 1, 1, 1, 1, 1, 1,
                    ],
                    detail: {},
                    rank: {
                        search: {
                            gid: '',
                        },
                        searchTime: [],
                        total_money: 0,
                        list: [],
                        group: []
                    },
                    rankList: [],
                    user_level: 0,
                    mubaio_level_text: 0,
                    present: [], //等级
                    yugu_data: null, //预估数据
                    my_data: null,
                }
            },
            methods: {
                getRankList(params) {
                    let that = this;
                    let loading = this.$loading()
                    let param = Object.assign(that.rank.search, params || {})
                    if (that.rank.searchTime.length >= 2) {
                        param.s_time = that.rank.searchTime[0]
                        param.e_time = that.rank.searchTime[1]
                    }
                    $.post(`/kcadmin/Jd/indexRanking`, param, res => {
                        loading.close();
                        that.rank.list = res.data.ranking;
                        that.rank.total_money = res.data.total_money;
                    })
                },
                getRankGroup() {
                    let that = this;
                    $.post(`/kcadmin/Jd/getGidList`, {}, res => {
                        that.rank.group = res.data;
                    })
                },
                to_list(i) {
                    window.location.href = `/kcadmin/new/mylist?a=1&id=${i}`
                },
                to_index(i) {
                    window.location.href = `/kcadmin/dy/index?is=${i}`
                },
                titles() {
                    $.post(`/kcadmin/Jd/indexNew`, {}, res => {
                        this.detail = res.data;
                        this.present = res.data.level_list
                        this.yugu_data = res.data.yugu_data
                        this.my_data = res.data.my_data
                        this.user_level = res.data.user_level
                        this.mubaio_level_text = res.data.mubaio_level_text

                        this.useEcharts(res.data)
                        console.log(res.data.level_list)
                    })
                },
                useEcharts(dataItems) {

                    var Orderdata1 = {
                        // column: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                        ordernum: ["47", "19", "19", "8", "10", "9", "21", "27", "51", "80", "91", "93", "68", "85", "74", "110", "112", "103", "43", "64", "77"],
                        auctionNum: ["74", "23", "23", "28", "10", "10", "37", "34", "67", "94", "117", "169", "92", "123", "175", "455", "373", "170", "54", "102", "131"],

                        estimateServiceFee: ["67.12", "40.84", "18.25", "8.82", "10.67", "11.76", "23.95", "32.75", "54.23", "113.96", "134.47", "153.03", "120.77", "120.47", "105.00", "207.18", "198.27", "155.84", "80.45", "94.71", "118.88"],
                        time: ["2020-07-26 00:00:00", "2020-07-26 01:00:00", "2020-07-26 02:00:00", "2020-07-26 03:00:00", "2020-07-26 04:00:00", "2020-07-26 05:00:00", "2020-07-26 06:00:00", "2020-07-26 07:00:00", "2020-07-26 08:00:00", "2020-07-26 09:00:00", "2020-07-26 10:00:00", "2020-07-26 11:00:00", "2020-07-26 12:00:00", "2020-07-26 13:00:00", "2020-07-26 14:00:00", "2020-07-26 15:00:00", "2020-07-26 16:00:00", "2020-07-26 17:00:00", "2020-07-26 18:00:00", "2020-07-26 19:00:00", "2020-07-26 20:00:00"],
                    };
                    let Orderdata = dataItems;
                    Orderdata.time.forEach((item, index, array) => {
                        Orderdata.time[index] = parseInt(item.substr(11, 2))  + item.substr(13, 3)
                    })


                    var myChart = echarts.init(document.getElementById('echart'), 'walden');
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['录单量', '订单量', '结算金额', '结算佣金']
                        },
                        toolbox: {
                            show: false,
                            feature: {
                                magicType: { show: true, type: ['stack', 'tiled'] },
                                saveAsImage: { show: false }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: Orderdata.time
                        },
                        yAxis: {},
                        grid: [{
                            left: 'left',
                            top: 'top',
                            right: '10',
                            bottom: 30
                        }],
                        series: [{
                            name: '商品数',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: Orderdata.auctionNum
                        }, {
                            name: '订单量',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: Orderdata.ordernum
                        }, {
                            name: '预估付款服务费',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: Orderdata.estimateServiceFee
                        }, {
                            name: '预估付款金额',
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {}
                            },
                            lineStyle: {
                                normal: {
                                    width: 1.5
                                }
                            },
                            data: Orderdata.estimateCosPrice
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                    $(window).resize(function () {
                        myChart.resize();
                    });
                }
            },
            mounted() {
                this.titles()
                this.getRankList()
                this.getRankGroup()
                // setTimeout(() => {
                // this.useEcharts()
                // }, 1000)
            },
        })
    </script>
    <!-- <link rel="stylesheet" href="./css.css"> -->
    <style>
        .ui-flex {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            color: inherit;
        }

        .ui-flex-between {
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

        .content-wrapper .content-top {
            display: none;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .clear {
            clear: both;
        }

        .grade {
            width: 100%;
            margin: 40px 15px;
            padding: 0 10px;
        }

        .active_n {
            color: #DB2121;
        }

        .titles {
            font-size: 18px;
            font-weight: 800;
            margin: 30px 0;
        }

        .titles img {
            width: 18px;
            height: 18px;
            margin-right: 10px;
        }

        .present {
            font-size: 14px;
            text-align: center;
            margin: 16px;
        }

        .grade-row {
            /* padding: 0 60px; */
        }

        .grade-row .logo {
            width: 42px;
            height: 42px;
            /* border: 1px solid #DB2121; */
            border-radius: 50%;
            text-align: center;
            background: #fff;
            margin: 10px auto 10px auto;
        }

        .row-item {
            position: relative;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 15px 10px;
            margin: 0 10px;
        }

        .row-item.active {
            box-shadow: 0px 0px 19px -7px #999;
        }

        .grade-row .logo img {
            width: 42px;
            height: 37px;
            /* margin-top: 8px; */
            z-index: 99;
        }

        .wire {
            width: 100%;
            /* height: 1px; */
            position: absolute;
            top: 21px;
            background: #DB2121;
        }

        .row-item .first {
            width: 50%;
            left: 50%;
        }

        .row-item .last {
            width: 50%;
            right: 50%;
        }

        .referral {
            /* width: 180px; */
            text-align: center;
            /* line-height: 30px; */
            /* font-weight: 800; */
            font-size: 16px;
            margin: auto;
        }

        .referral .v {
            font-size: 22px;
        }

        .referral .active {}

        .referral .num {
            font-size: 15px;
            font-weight: 400;
        }

        .referral .text {
            /* line-height: 22px; */
            height: 70px;
            font-size: 12px;
            color: #999;
        }

        /* 2 */
        .predict {
            /* padding: 0 10px 0 0; */
        }

        .time-item {
            height: 106px;
            border-radius: 8px;
            padding: 16px 15px 0 28px;
            color: #fff;
        }

        .time-item>div:first-child {
            margin: 0 0 56px 0;
            font-size: 18px;
        }

        .time-item .date {
            width: 45px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            text-align: center;
            color: #333;
            background: #fff;
            border-radius: 2px;
        }

        .time-item>div:last-child {
            font-size: 12px;
        }

        /* 3 */
        .mydata {
            /* padding: 0 10px 0 0; */
        }

        .mydata .title {
            text-align: center;
            font-size: 14px;
        }

        .num-item {
            height: 116px;
            border-radius: 8px;
            padding: 12px 15px 0 28px;
            color: #fff;
        }

        .num-item>div {
            width: 40%;
            text-align: center;
        }

        .num-item .num {
            line-height: 30px;
            font-size: 20px;
        }

        .num-item .numtext {
            font-size: 14px;
        }

        /* 4 */
        .table {
            border: 1px solid #F4F4F4;
        }

        .table .item {
            height: 52px;
            line-height: 52px;
            font-size: 14px;
        }

        .table .top {
            font-size: 15px;
            font-weight: 800;
        }

        .table .item:nth-child(even) {
            background: #F9F9F9;
        }

        .table .item img {
            width: 28px;
            height: 22px;
            margin: 15px -30px;
            padding-right: 10px;
        }

        .fixed-table-toolbar {
            margin-top: -10px;
            margin-bottom: 10px;
        }
    </style>
</block>
<!-- </html> -->